Ext.define('HRMobile.view.employeeDetails.EmergencyContactsForm', {
    extend: 'Ext.form.Panel',
    controllers: ['EmployeeController'],
    config: {
    	 border: true,
    	 style: 'border-left-style: solid;',
    		 items:{
    			 xtype: 'fieldset',
    			 height: '100%',
    			 docked: 'top',
    			 title: 'Emergency Contacts',
    			 items: [{
    				 xclass: 'HRMobile.view.employeeDetails.EmergencyContactsList',
				    id: 'emergencycontactlist',
    			},
    			    {
    					 xclass: 'HRMobile.view.employeeDetails.emergencyContactsDetails',
    					 id: 'emergencyContactsDetails'
    					    }]
    			
    			 
    		 }
    }
});
Ext.define('HRMobile.view.employeeDetails.EmergencyContactsList', {
    extend: 'Ext.dataview.List',
    config: {
    	height: '100%',
    	itemTpl: 
    	'<div style="font-size:15px"><b>{ecName}</b></div>'+
    	'<div style="font-size:15px">Relationship: {ecRelationship}</div>',
    	store: 'EmergencyContactsStore',
    	onItemDisclosure: true
    	}
});
Ext.define('HRMobile.view.employeeDetails.emergencyContactsDetails', {
	extend: 'Ext.form.Panel',
    config: {
    	modal: true,
    	centered: true,
    	hideOnMaskTap: true,
    	hidden: true,
    	width: Ext.os.is.Phone?320:450,
    	height: Ext.os.is.Phone?320:400,
    	hideAnimation: {
    		type: 'popOut',
    		duration: 250,
    		easing: 'ease-out'
    	},
    	styleHtmlContent: true,
        defaults: {
            xtype: 'fieldset',
            defaults: {
            	xtype: 'container',
            	layout: {
            		type: 'hbox'
            	},
            	defaults: {
                xtype: 'textfield',
                readOnly: true,
				labelWidth: '40%',
				labelWrap: true
            	}
            }
        },
        items:[{
        	xtype: 'toolbar',
            docked: 'top',
            items: [
                {xtype: 'spacer'},
                {xtype: 'button', 
                 text: 'Done', 
                 handler: function(){Ext.getCmp('emergencyContactsDetails').hide();}
                },
            ],
        	   },
               {
               title: 'Emergency Contact',
               items: [{
            	   items: [{
                       label: 'Name:',
                       name: 'ecName',
                       flex: 95
                   },{
            		   xtype: 'button',
            		   flex: 5,
            		   margin: 10,
            		   style: 'visibility:hidden'
            	   }]
               }, {
            	   items: [{
            		   label: 'Relationship:',
                       name: 'ecRelationship',
                       flex: 95
            	   },{
            		   xtype: 'button',
            		   flex: 5,
            		   margin: 10,
            		   style: 'visibility:hidden'
            	   }]
                   
               }, {
            	   items: [{
            		   label: 'Mobile Phone:',
            		   name: 'ecMobileNo',
                       flex: 9
            	   },{ id:'btnCallMobile',
            		   flex : 1,
            		   margin: 10,

            		   xtype: 'panel'}]
               },{
                   items:[{
                	   label: 'Home Phone:',
                	   name: 'ecHomeNo',
                	   flex: 9
                   },{ id:'btnCallHome',
            		   flex : 1,
            		   margin: 10,
            		   xtype: 'panel'}]
               },{
                   items: [{
                	   label: 'Office Phone:',
                       name: 'ecOfficeNo',
                       flex: 9
                   },{ id:'btnCallOffice',
            		   flex : 1,
            		   margin: 10,
            		   xtype: 'panel'}]
               
               }]
        }]
    }
});